<template>
    <div class="app-container">
        <span>候选人信息</span>
        <div class="mesage">
            <div class="item">
                候选人：<span class="name">{{ this.userform.name }}</span>
            </div>
            <div class="item">
                手机号：<span class="name">{{ this.userform.phone }}</span>
            </div>
            <div class="item">
                身份证号：<span class="name">{{ this.userform.card }}</span>
            </div>

            <div class="item">
                背调授权：<span class="name" v-if="this.userform.isAuthorized == 1">已授权</span>
                <span class="name" v-if="this.userform.isAuthorized == 0">未授权</span>
                <el-button type="primary" style="margin-left: 50px;" @click="Send">重新发送</el-button>
            </div>
        </div>
        <el-divider></el-divider>
        <span>订单状态</span>
        <div class="order">
            <el-steps style="width: 100%; justify-content: center;" :space="200" :active="activeStatus" align-center
                finish-status="success">
                <el-step title="发起背调" :description="description"></el-step>
                <el-step title="待授权"></el-step>
                <el-step title="背调中"></el-step>
                <el-step title="已出报告"></el-step>
            </el-steps>
        </div>

        <el-divider></el-divider>
        <span>调查结果</span>
        <el-table :header-cell-style="{ background: '#cbceda' }" :data="tableData" style="width: 90%;margin: 20px;">
            <el-table-column align="center" prop="surveyName" label="调查项目">
            </el-table-column>
            <el-table-column align="center" prop="status" label="调查状态">
                <template slot-scope="scope">
                    <p v-if="scope.row.surveyStatus === 0">未开始</p>
                    <p v-if="scope.row.surveyStatus === 1">调查中</p>
                    <p v-if="scope.row.surveyStatus === 2">已完成</p>
                    <p v-if="scope.row.surveyStatus === 3">异常</p>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="resule" label="调查结果">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.surveyResult == '1'">待出具</el-tag>
                    <el-tag type="success" v-if="scope.row.surveyResult == '2'">无风险</el-tag>
                    <el-tag type="warning" v-if="scope.row.surveyResult == '3'" class="blue-text">低风险</el-tag>
                    <el-tag type="warning" v-if="scope.row.surveyResult == '4'" class="yellow-text">中风险</el-tag>
                    <el-tag type="danger" v-if="scope.row.surveyResult == '5'" class="red-text">高风险</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getUserlnfo, sendAgainfo, getOrderStatus, listOrderReports, } from "@/api/ReportListProgress/ReportListProgress";

export default {
    name: "ReportListProgress",
    data() {
        return {
            tableData: [
            ],
            userform: {},
            activeStatus: 0,
            description: ''
        }

    },
    mounted() {
        this.getUser()
        this.getOrderStatus()
    },
    activated() {
        this.getUser()
        this.getOrderStatus()
    },
    methods: {
        //    候选人信息
        getUser() {
            getUserlnfo({ id: this.$route.query.info }).then(res => {
                this.userform = res.data
            })
        },
        //    获取订单状态
        getOrderStatus() {
            getOrderStatus({ orderId: this.$route.query.info }).then(res => {
                this.description = this.$moment(res.data.startTime).format('YYYY-MM-DD HH:mm:ss'),
                    this.activeStatus = res.data.status + 1;
            })
            listOrderReports({ orderId: this.$route.query.info, type: '0' }).then(res => {
                this.tableData = res.data
            })

        },
        // 短信重发接口
        Send() {
            const loading = this.$loading({
                lock: true,
                text: '正在发送信息，请稍候...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            sendAgainfo({ orderId: this.$route.query.info }).then(res => {
                loading.close();
                this.$message({
                    message: res.msg,
                    type: 'success'
                }).catch(() => {
                    loading.close();
                    this.$message.error('发送失败！');
                });
            })
        }
    }
}
</script>

<style scoped lang="scss">
.app-container {
    .mesage {
        display: flex;
        font-size: 14px;
        flex-wrap: wrap;
        margin-top: 10px;

        .item {
            margin: 10px 0;
            width: 33%;

            .name {
                margin-left: 5px;
                color: #545f84;
            }
        }
    }

    .order {
        display: flex;
        width: 100%;
        margin: 20px 0;
    }
}
</style>
